﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>矫正人员花名册</title>
<link href="/css/layout.css" rel="stylesheet" type="text/css" />
<link href="/css/cb.css" rel="stylesheet" type="text/css" />
<link href="/css/n.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css"
	href="/easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="/easyui/demo/demo.css" />
<link rel="stylesheet" type="text/css"
	href="/js/laypage/skin/laypage.css" />

<script type="text/javascript" src="/easyui/jquery.min.js"></script>
<script src="/js/vue/vue.min.js" charset="utf-8"></script>
<script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/js/laypage/laypage.js"></script>
<script type="text/javascript" src="/js/layer/layer.js"></script>
<script type="text/javascript" src="/laydate/laydate.js"></script>

</head>
<body>
	<div id="app">
	<table width="99%" border="0" align="center" cellpadding="0"
		cellspacing="0">
		<tr>
			<td width="1%" align="left"	background="/images/b2.jpg">
				<img src="/images/b1.jpg" width="10" height="26" />
			</td>
			<td width="68%" background="/images/b2.jpg">
			<table width="124" border="0" align="left" cellpadding="0" cellspacing="0">
					<tr>
						<td width="20" align="left">
							<img src="/images/tz.gif" width="10" height="16" />
						</td>
						<td width="104" align="left" class="biao">查询矫正人员信息</td>
					</tr>
			</table>
			</td>
			<td width="31%" align="right"
				background="/images/b2.jpg"><img
				src="/images/b3.jpg" width="9" height="26" /></td>
		</tr>
	</table>
	<table width="99%" border="0" align="center" cellpadding="3"
		cellspacing="1" bgcolor="#AEDEF4">
		<tr>
			<td align="center" bgcolor="#E2F7FE">
				<form id="form1" name="form1" method="post" action="">
					<table width="80%" border="0" cellspacing="1" cellpadding="3">
						<tr>
							<td width="10%" align="right">姓名:</td>
							<td width="10%" align="left">
								<input name="name" type="text" id="name" size="15" />
							</td>
							<td width="10%" align="right">罪名:</td>
							<td width="10%" align="left">
								<input name="charge" type="text" id="charge" size="15" />
							</td>
							<td width="10%" align="right">出生日期:</td>
							<td width="10%" align="left">
								<input placeholder="请输入日期"	class="laydate-icon" onclick="laydate()" id="birth"/>
							</td>
							<td align="right">&nbsp;至&nbsp;&nbsp;</td>
							<td align="left">
								<input placeholder="请输入日期"	class="laydate-icon" onclick="laydate()" id="birth1"/>
							</td>
							<td width="10%" align="right">
								<input type="button" id="but" value="查找" />
								<input type="button" id="but1" value="批量删除" align="right"/>
							</td>
							<td width="10%" align="right">
								<input type="button" onclick="exportBut()" value="批量导出" align="right"/>
								<input type="button" id="export" value="导出Excle" align="right"/>
							</td>
						</tr> 
					</table>
				</form>
			</td>
		</tr>
	</table>
	<table width="50%" border="0" cellspacing="0" cellpadding="0">
		<tr>
			<td height="5"></td>
		</tr>
	</table>
	<table width="99%" border="0" align="center" cellpadding="0"
		cellspacing="0">
		<tr>
			<td width="1%" align="left"	background="/images/b2.jpg">
				<img src="/images/b1.jpg" width="10" height="26" />
			</td>
			<td width="68%" background="/images/b2.jpg">
				<table width="124" border="0" align="left" cellpadding="0" cellspacing="0">
					<tr>
						<td width="20" align="left">
							<img src="/images/tz.gif" width="10" height="16" />
						</td>
						<td width="104" align="left" class="biao">矫正人员花名册</td>
					</tr>
				</table>
			</td>
			<td width="31%" align="right" background="/images/b2.jpg">
				<img src="/images/b3.jpg" width="9" height="26" />
			</td>
		</tr>
	</table>
	<table width="99%" border="0" align="center" cellpadding="3"
		cellspacing="1" bgcolor="#AEDEF4" style="border: 1px solid #AEDEF4">
		<tr>
			<td align="center" bgcolor="#EFFBFE"><input type="checkbox" id="all"/></td>
			<td width="2%" height="25" align="center" bgcolor="#EFFBFE">序号</td>
			<td align="center" bgcolor="#EFFBFE">姓名</td>
			<td align="center" bgcolor="#EFFBFE">性别</td>
			<td align="center" bgcolor="#EFFBFE">出生日期</td>
			<td align="center" bgcolor="#EFFBFE">罪名</td>
			<td align="center" bgcolor="#EFFBFE">原判期刑</td>
			<td align="center" bgcolor="#EFFBFE">刑罚执行类别</td>
			<td align="center" bgcolor="#EFFBFE">矫正开始</td>
			<td align="center" bgcolor="#EFFBFE">矫正截止</td>
			<td align="center" bgcolor="#EFFBFE">管理操作</td>
		</tr>
		<tr v-for="(item,index) in result"
			onmouseout="this.style.backgroundColor='#ffffff'"
			bgcolor="#ffffff" onmouseover="this.style.backgroundColor='#E6F2FF'">
			<td align="center"><input type="checkbox" name="id" :value="item.id" /></td>
			<td height="25" align="center"><span v-text="startIndex+index"></span></td>
			<td align="center" class="t5">{{item.name}}</td>
			<td align="center">{{item.sex}}</td>
			<td align="center">{{item.birthday}}</td>
			<td align="center">{{item.charge}}</td>
			<td align="center">{{item.yp_date}}</td>
			<td align="center">{{item.zx_type}}</td>
			<td align="center">{{item.j_startdate}}</td>
			<td align="center">{{item.j_enddate}}</td> 
			<td align="left">
				<div align="left" style="padding-left: 5px">
					<div align="center">
						<input type="button" @click="checkEvent(item.id)" value="查看" /> 
						<input type="button" @click="editEvent(item.id)"  value="修改" /> 
						<input type="button" @click="delEvent(item.id,url)" value="删除" />
					</div>
				</div>
			</td>
		</tr>
		<tr>
			<td colspan="12" align="center">
				<div id="pagediv"></div>
			</td>
		</tr>
	</table>
	<!-- 修改矫正人员页面 -->
	<div id="editCorrectedPerson"></div>
	<!-- 查看矫正人员详情 -->
	<div id="checkCorrectedPerson"></div>
</div>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			result:[],
			startIndex:1
		}
	});
	//分页显示列表
	 var get=function(curr){
		$.ajax({
			url:'/correctedPerson/findList',
			data:{
				pageSize:6,
				curPageNum:curr || 1,
				name:$('#name').val(),
				charge:$('#charge').val(),
				birth:$('#birth').val(),
				birth1:$('#birth1').val()
			},
			type:'GET',
			dataType:'json',
			success:function(data){
				vm.result=data.result;
				vm.startIndex=(data.curPageNum-1)*data.pageSize+1;
				laypage({
					cont : 'pagediv', //容器。值支持id名、原生dom对象，jquery对象,
	                pages : data.totalPage, //总页数
	                first : "首页",
	                last : "尾页",
	                skip : true, //是否开启跳页
	                skin : '#5675A2',
	                curr : curr || 1, //当前页
	                jump : function(obj, first) { //触发分页后的回调
	                   if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
	                	   get(obj.curr);
	                       }
	                   }
				});
				invert(); 
			}
		});
	} 

	//回调
	get();
	
	//动态条件查询
	$('#but').on('click',function(){
		get();
	})
	
	//修改
	var editEvent=function(id){
		$('#editCorrectedPerson').dialog({
			title : '修改矫正人员信息 ',
			width : 750,
			height : 450,
			closed : false,
			cache : false,
			href : '/correctedPerson/edit?id=' + id,
			modal : true,
			buttons : [ {
				text : '保存',
				iconCls : 'icon-ok',
				handler : function() {
					var formDate = new FormData($('#updateCorrectedPerson')[0]);
					$.ajax({
						url : "/correctedPerson/update",
						type : "post",
						dataType : "json",
						async : false,
						cache : false,
						contentType : false,
						processData : false,
						data : formDate,
						success : function(result) {
							$.messager.alert({
								title : '消息',
								msg : '修改成功!',
								icon : 'info'
							});
							get();
							$('#editCorrectedPerson').dialog('close');
						}
					});
				}
			}, {
				text : '关闭',
				handler : function() {
					$('#editCorrectedPerson').dialog('close');
				}
			} ]
		});
	}
	
	//删除
	var url="/correctedPerson/delete";
	var delEvent = function(id,url) {
		$.messager.confirm('提示框', '你确定要删除吗?', function(res) {
			if (res) {
				$.ajax({
					url : url,
					type : "get",
					dataType : "json",
					data : {
						id : id
					},
					success : function(result) {
						$.messager.alert({
							title : '消息',
							msg : '删除成功!',
							icon : 'info'
						});
						get();
					}
				});
			} else {
				// 取消删除
			}
		})
	}
	
	
	//批量删除
	$('#but1').on('click',function(){
		var list=[];
		$("input[name='id']:checked").each(function(){
			list.push($(this).val());
		})
		if(list.length==0){
			$.messager.alert({
	            title: '消息',
	            msg: '请选择需要删除的信息!',
	            icon: 'info'
	        });
			return;
		}
		var url="/correctedPerson/deleteBatch";
		delEvent(list,url);
	})
	
	//反选
	 var invert=function(){
		$("input[name='id']:checked").each(function(){
			if($(this).attr("checked",true)){
				$(this).removeAttr("checked");
			}
		})
	}  
	//全选反选
	$(function(){
	    $("#all").click(function() {
	        var isChecked = $(this).prop("checked");
	        $("input[name='id']").prop("checked", isChecked);
	    });
	    //更改messager提示为中文
	    $.extend($.messager.defaults,{
			ok:"确定",
			cancel:"取消"
		});
	})
	
	//导出execle表格
	$("#export").on('click',function(){
		var url = "/correctedPerson/exportCorrectedPersonExcel";
		window.open(url);
	})
	
	//批量导出
		var exportBut = function(){
			var ids=[];
			$("input[name='id']:checked").each(function(){
				ids.push($(this).val());
			})
			if(ids.length==0){
				$.messager.alert({
		            title: '消息',
		            msg: '请选择需要导出的信息!',
		            icon: 'info'
		        });
			}else{
				$.messager.confirm('提示框', '你确定要导出吗?',
				     function(res) {
				        if (res) {
				             var url = "/correctedPerson/exportCorrectedPersonExcel?ids=" + ids;
				             window.open(url);
				        } else {
				             // 取消
				     	}
					})
				}
			}
	
	//查看详情
		var checkEvent = function(id) {
			$('#checkCorrectedPerson').dialog({
				title : '查看服刑人员详情',
				width:750,
				height:450,
				closed : false,
				cache : false,
				href : '/correctedPerson/checkDetail?id=' + id,
				modal : true,
				buttons : [ {
					text : '关闭',
					handler : function() {
						$('#checkCorrectedPerson').dialog('close');
					}
				} ]
			});
		}
	
</script>
	
</body>
</html>